<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>40条常见的移动端Web页面问题解决方案 | Jason&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="40条常见的移动端Web页面问题解决方案">
<meta property="og:type" content="article">
<meta property="og:title" content="40条常见的移动端Web页面问题解决方案">
<meta property="og:url" content="https://xianguoji.gitee.io/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/index.html">
<meta property="og:site_name" content="Jason&#39;s Blog">
<meta property="og:description" content="40条常见的移动端Web页面问题解决方案">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2016-10-20T16:00:00.000Z">
<meta property="article:modified_time" content="2020-08-13T02:12:38.265Z">
<meta property="article:author" content="Jason">
<meta property="article:tag" content="移动端">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/myblog/" title="Jason&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/myblog/css/style.css">

<meta name="generator" content="Hexo 5.0.2"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/myblog/" id="logo">人与人的悲欢并不相通，孤独是生命的本质。</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/myblog/" id="subtitle">欢迎来到我的个人网站</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/myblog/">Home</a>
        
          <a class="main-nav-link" href="/myblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/myblog/" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://xianguoji.gitee.io/myblog"></form>
      </div>
    </div>
  </div>
</header>
<style>
  #logo{
    text-shadow:0 0 5px #000;
    /* font-weight: bold; */
  }
  #subtitle-wrap{
    margin-top: 50px;
  }
</style>
      <div class="outer">
        <section id="main"><article id="post-2016-11-21-40条常见的移动端Web页面问题解决方案 " class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/" class="article-date">
  <time datetime="2016-10-20T16:00:00.000Z" itemprop="datePublished">2016-10-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      40条常见的移动端Web页面问题解决方案
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1、安卓浏览器看背景图片，有些设备会模糊。"><a href="#1、安卓浏览器看背景图片，有些设备会模糊。" class="headerlink" title="1、安卓浏览器看背景图片，有些设备会模糊。"></a>1、安卓浏览器看背景图片，有些设备会模糊。</h3><p>用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？</p>
<p>经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。</p>
<p>想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。</p>
<p>代码可以如下：</p>
<pre><code> background:url(../myblog/images/icon/all.png) no-repeat center center;
 -webkit-background-size:50px 50px;
 background-size: 50px 50px;
 display:inline-block;
 width:100%;
 height:50px;</code></pre>
<p>或者指定 background-size:contain;都可以，大家试试！</p>
<h3 id="2、图片加载"><a href="#2、图片加载" class="headerlink" title="2、图片加载"></a>2、图片加载</h3><p>若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：</p>
<p>具体的canvas API 参见：<a target="_blank" rel="noopener" href="http://javascript.ruanyifeng.com/htmlapi/canvas.html">http://javascript.ruanyifeng.com/htmlapi/canvas.html</a></p>
<p>下面举例说明一个canvas的例子：</p>
<pre><code>&lt;li&gt;&lt;canvas&gt;&lt;/canvas&gt;&lt;/li&gt;</code></pre>
<p>js动态加载图片和li 总共举例17张图片！</p>
<pre><code>var total = 17;
    var zWin = $(window);
    var render = function () &#123;
        var padding = 2;
        var winWidth = zWin.width();
        var picWidth = Math.floor((winWidth - padding * 3) / 4);
        var tmpl = &#39;&#39;;
        for (var i = 1; i &lt;= totla; i++) &#123;
            var p = padding;
            var imgSrc = &#39;img/&#39; + i + &#39;.jpg&#39;;
            if (i % 4 == 1) &#123;
                p = 0;
            &#125;
            tmpl += &#39;&lt;li style=&quot;width:&#39; + picWidth + &#39;px;height:&#39; + picWidth + &#39;px;padding-left:&#39; + p + &#39;px;padding-top:&#39; + padding + &#39;px;&quot;&gt;&lt;canvas id=&quot;cvs_&#39; + i + &#39;&quot;&gt;&lt;/canvas&gt;&lt;/li&gt;&#39;;
            var imageObj = new Image();
            imageObj.index = i;
            imageObj.onload = function () &#123;
                var cvs = $(&#39;#cvs_&#39; + this.index)[0].getContext(&#39;2d&#39;);
                cvs.width = this.width;
                cvs.height = this.height;
                cvs.drawImage(this, 0, 0);
            &#125;
            imageObj.src = imgSrc;
        &#125;
    &#125;
    render();</code></pre>
<h3 id="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。"><a href="#3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。" class="headerlink" title="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。"></a>3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。</h3><p>zeptojs内置Touch events方法，具体可以看[<a target="_blank" rel="noopener" href="http://zeptojs.com/#Touch">http://zeptojs.com/#Touch</a> events](<a target="_blank" rel="noopener" href="http://zeptojs.com/#Touch">http://zeptojs.com/#Touch</a> events)</p>
<p>看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！</p>
<h3 id="4、防止手机中网页放大和缩小"><a href="#4、防止手机中网页放大和缩小" class="headerlink" title="4、防止手机中网页放大和缩小"></a>4、防止手机中网页放大和缩小</h3><p>这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport</p>
<p>还有就是，有些手机网站我们看到如下声明：</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.0//EN&quot; &quot;http://www.wapforum.org/DTD/xhtml-mobile10.dtd&quot;&gt;</code></pre>
<p>设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明<!DOCTYPE html>。</p>
<p>使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable=0&quot; /&gt;</code></pre>
<p>但是为了更好的兼容，我们会使用完整的viewport设置:</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0&quot; /&gt;</code></pre>
<p>当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。</p>
<h3 id="5、apple-mobile-web-app-capable"><a href="#5、apple-mobile-web-app-capable" class="headerlink" title="5、apple-mobile-web-app-capable"></a>5、apple-mobile-web-app-capable</h3><p>apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。</p>
<p>语法：</p>
<pre><code>&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;</code></pre>
<p>说明：</p>
<p>如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。</p>
<h3 id="7、html5调用安卓或者ios的拨号功能"><a href="#7、html5调用安卓或者ios的拨号功能" class="headerlink" title="7、html5调用安卓或者ios的拨号功能"></a>7、html5调用安卓或者ios的拨号功能</h3><p>html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。</p>
<p>如下</p>
<pre><code>&lt;a href=&quot;tel:4008106999,1034&quot;&gt;400-810-6999 转 1034&lt;/a&gt;</code></pre>
<p>拨打手机直接如下</p>
<pre><code>&lt;a href=&quot;tel:15677776767&quot;&gt;点击拨打15677776767&lt;/a&gt;</code></pre>
<h3 id="8、html5GPS定位功能"><a href="#8、html5GPS定位功能" class="headerlink" title="8、html5GPS定位功能"></a>8、html5GPS定位功能</h3><p>具体请看：<a target="_blank" rel="noopener" href="http://www.jb51.net/post/html5_GPS_getCurrentPosition">http://www.jb51.net/post/html5_GPS_getCurrentPosition</a></p>
<h3 id="9、上下拉动滚动条时卡顿、慢"><a href="#9、上下拉动滚动条时卡顿、慢" class="headerlink" title="9、上下拉动滚动条时卡顿、慢"></a>9、上下拉动滚动条时卡顿、慢</h3><pre><code>body &#123;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
 &#125;</code></pre>
<p>Android3+和iOS5+支持CSS3的新属性为overflow-scrolling</p>
<h3 id="10、禁止复制、选中文本"><a href="#10、禁止复制、选中文本" class="headerlink" title="10、禁止复制、选中文本"></a>10、禁止复制、选中文本</h3><pre><code>Element &#123;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
&#125;</code></pre>
<p>解决移动设备可选中页面文本(视产品需要而定)</p>
<h3 id="11、长时间按住页面出现闪退"><a href="#11、长时间按住页面出现闪退" class="headerlink" title="11、长时间按住页面出现闪退"></a>11、长时间按住页面出现闪退</h3><pre><code>element &#123;
   -webkit-touch-callout: none;
&#125;</code></pre>
<h3 id="12、iphone及ipad下输入框默认内阴影"><a href="#12、iphone及ipad下输入框默认内阴影" class="headerlink" title="12、iphone及ipad下输入框默认内阴影"></a>12、iphone及ipad下输入框默认内阴影</h3><pre><code>Element&#123;
   -webkit-appearance: none;
&#125;</code></pre>
<h3 id="13、ios和android下触摸元素时出现半透明灰色遮罩"><a href="#13、ios和android下触摸元素时出现半透明灰色遮罩" class="headerlink" title="13、ios和android下触摸元素时出现半透明灰色遮罩"></a>13、ios和android下触摸元素时出现半透明灰色遮罩</h3><pre><code>Element &#123;
   -webkit-tap-highlight-color:rgba(255,255,255,0);
&#125;</code></pre>
<p>设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。</p>
<p>后面一篇文章有详细介绍，地址：<a target="_blank" rel="noopener" href="http://www.jb51.net/post/phone_web_ysk">http://www.jb51.net/post/phone_web_ysk</a></p>
<h3 id="14、active兼容处理-即-伪类-active-失效"><a href="#14、active兼容处理-即-伪类-active-失效" class="headerlink" title="14、active兼容处理 即 伪类 :active 失效"></a>14、active兼容处理 即 伪类 :active 失效</h3><p>方法一：body添加ontouchstart</p>
<pre><code>&lt;body ontouchstart=&quot;&quot;&gt;</code></pre>
<p>方法二：js给 document 绑定 touchstart 或 touchend 事件</p>
<pre><code>&lt;style&gt;
a &#123;
    color: #000;
&#125;

a:active &#123;
    color: #fff;
&#125;
&lt;/style&gt;

 &lt;a herf=foo&gt;bar&lt;/a&gt;
&lt;script&gt;  document.addEventListener(&#39;touchstart&#39;, function () &#123;&#125;, false); &lt;/script&gt;</code></pre>
<h3 id="15、动画定义3D启用硬件加速"><a href="#15、动画定义3D启用硬件加速" class="headerlink" title="15、动画定义3D启用硬件加速"></a>15、动画定义3D启用硬件加速</h3><pre><code>Element &#123;   -webkit-transform:translate3d(0, 0, 0)   transform: translate3d(0, 0, 0); &#125;</code></pre>
<p>注意：3D变形会消耗更多的内存与功耗</p>
<h3 id="16、Retina屏的1px边框"><a href="#16、Retina屏的1px边框" class="headerlink" title="16、Retina屏的1px边框"></a>16、Retina屏的1px边框</h3><pre><code>Element&#123;   border-width: thin; &#125;</code></pre>
<h3 id="17、webkit-mask-兼容处理"><a href="#17、webkit-mask-兼容处理" class="headerlink" title="17、webkit mask 兼容处理"></a>17、webkit mask 兼容处理</h3><p>某些低端手机不支持css3 mask，可以选择性的降级处理。</p>
<p>比如可以使用js判断来引用不同class：</p>
<pre><code>if( &#39;WebkitMask&#39; in document.documentElement.style)&#123;
  alert(&#39;支持mask&#39;);
 &#125; else &#123;
    alert(&#39;不支持mask&#39;);
   &#125;</code></pre>
<h3 id="18、旋转屏幕时，字体大小调整的问题"><a href="#18、旋转屏幕时，字体大小调整的问题" class="headerlink" title="18、旋转屏幕时，字体大小调整的问题"></a>18、旋转屏幕时，字体大小调整的问题</h3><pre><code>html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 &#123;   -webkit-text-size-adjust:100%; &#125;</code></pre>
<h3 id="19、transition闪屏"><a href="#19、transition闪屏" class="headerlink" title="19、transition闪屏"></a>19、transition闪屏</h3><pre><code>/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
 -webkit-backface-visibility:hidden;</code></pre>
<h3 id="20、圆角bug"><a href="#20、圆角bug" class="headerlink" title="20、圆角bug"></a>20、圆角bug</h3><p>某些Android手机圆角失效</p>
<pre><code>background-clip: padding-box;</code></pre>
<h3 id="21、顶部状态栏背景色"><a href="#21、顶部状态栏背景色" class="headerlink" title="21、顶部状态栏背景色"></a>21、顶部状态栏背景色</h3><pre><code>&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot; /&gt;</code></pre>
<p>说明：</p>
<p>除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。</p>
<p>如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。</p>
<h3 id="22、设置缓存"><a href="#22、设置缓存" class="headerlink" title="22、设置缓存"></a>22、设置缓存</h3><pre><code>&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot; /&gt;</code></pre>
<p>手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。</p>
<h3 id="24、启动画面"><a href="#24、启动画面" class="headerlink" title="24、启动画面"></a>24、启动画面</h3><pre><code>&lt;link rel=&quot;apple-touch-startup-image&quot; href=&quot;start.png&quot;/&gt;</code></pre>
<p>iOS下页面启动加载时显示的画面图片，避免加载时的白屏。</p>
<p>可以通过madia来指定不同的大小：</p>
<pre><code>&lt;!--iPhone--&gt;
&lt;link href=&quot;apple-touch-startup-image-320x460.png&quot; media=&quot;(device-width: 320px)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPhone Retina --&gt;

&lt;link href=&quot;apple-touch-startup-image-640x920.png&quot; media=&quot;(device-width: 320px) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPhone 5 --&gt;

&lt;link rel=&quot;apple-touch-startup-image&quot;media=&quot;(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)&quot; href=&quot;apple-touch-startup-image-640x1096.png&quot;&gt;   &lt;!-- iPad portrait --&gt;

&lt;link href=&quot;apple-touch-startup-image-768x1004.png&quot; media=&quot;(device-width: 768px) and (orientation: portrait)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad landscape --&gt;

&lt;link href=&quot;apple-touch-startup-image-748x1024.png&quot; media=&quot;(device-width: 768px) and (orientation: landscape)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad Retina portrait --&gt;

&lt;link href=&quot;apple-touch-startup-image-1536x2008.png&quot;media=&quot;(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;   &lt;!-- iPad Retina landscape --&gt;

&lt;link href=&quot;apple-touch-startup-image-1496x2048.png&quot;media=&quot;(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)&quot;rel=&quot;apple-touch-startup-image&quot;/&gt;</code></pre>
<h3 id="25、浏览器私有及其它meta"><a href="#25、浏览器私有及其它meta" class="headerlink" title="25、浏览器私有及其它meta"></a>25、浏览器私有及其它meta</h3><p>以下属性在项目中没有应用过，可以写一个demo测试以下！</p>
<p>QQ浏览器私有</p>
<pre><code>全屏模式
&lt;meta name=&quot;x5-fullscreen&quot; content=&quot;true&quot;&gt;

强制竖屏
&lt;meta name=&quot;x5-orientation&quot; content=&quot;portrait&quot;&gt;

强制横屏
&lt;meta name=&quot;x5-orientation&quot; content=&quot;landscape&quot;&gt;

应用模式
&lt;meta name=&quot;x5-page-mode&quot; content=&quot;app&quot;&gt;</code></pre>
<p>UC浏览器私有</p>
<pre><code>全屏模式
&lt;meta name=&quot;full-screen&quot; content=&quot;yes&quot;&gt;

强制竖屏
&lt;meta name=&quot;screen-orientation&quot; content=&quot;portrait&quot;&gt;

强制横屏
&lt;meta name=&quot;screen-orientation&quot; content=&quot;landscape&quot;&gt;

应用模式
&lt;meta name=&quot;browsermode&quot; content=&quot;application&quot;&gt;</code></pre>
<p>其它<br>    针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓</p>
<pre><code>&lt;meta name=&quot;HandheldFriendly&quot; content=&quot;true&quot;&gt;</code></pre>
<p>微软的老式浏览器</p>
<pre><code>&lt;meta name=&quot;MobileOptimized&quot; content=&quot;320&quot;&gt;</code></pre>
<p>windows phone 点击无高光</p>
<pre><code>&lt;meta name=&quot;msapplication-tap-highlight&quot; content=&quot;no&quot;&gt;</code></pre>
<h3 id="26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><a href="#26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好" class="headerlink" title="26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好"></a>26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好</h3><p>问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！</p>
<p>解决办法：</p>
<p>可以用html5的oninput事件去代替keyup</p>
<pre><code>&lt;input type=&quot;text&quot; id=&quot;testInput&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    document.getElementById(&#39;testInput&#39;).addEventListener(&#39;input&#39;, function (e) &#123;
        var value = e.target.value;
    &#125;);
&lt;/script&gt;</code></pre>
<p>然后就达到类似keyup的效果！</p>
<h3 id="27、h5网站input-设置为type-number的问题"><a href="#27、h5网站input-设置为type-number的问题" class="headerlink" title="27、h5网站input 设置为type=number的问题"></a>27、h5网站input 设置为type=number的问题</h3><p>h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。</p>
<p>问题一解决，我目前用的是js。如下</p>
<pre><code>&lt;input type=&quot;number&quot; oninput=&quot;checkTextLength(this ,10)&quot;&gt;

function checkTextLength(obj, length) &#123;
        if (obj.value.length &gt; length) &#123;
            obj.value = obj.value.substr(0, length);
        &#125;
    &#125;</code></pre>
<p>问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：</p>
<pre><code>&lt;input type=&quot;number&quot; step=&quot;0.01&quot; /&gt;</code></pre>
<p>关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。</p>
<p>假如step和min一起使用，那么数值必须在min和max之间。</p>
<p>看下面的例子：<br>     <input type="number" step="3.1" min="1" /></p>
<pre><code> &lt;input type=&quot;number&quot; step=&quot;3.1&quot; min=&quot;1&quot; /&gt;</code></pre>
<p>输入框可以输入哪些数字？</p>
<p>首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。</p>
<p>问题三，去除input默认样式</p>
<pre><code>input[type=number] &#123;
        -moz-appearance: textfield;
    &#125;

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button &#123;
        -webkit-appearance: none;
        margin: 0;
    &#125;</code></pre>
<h3 id="28、ios-设置input-按钮样式会被默认样式覆盖"><a href="#28、ios-设置input-按钮样式会被默认样式覆盖" class="headerlink" title="28、ios 设置input 按钮样式会被默认样式覆盖"></a>28、ios 设置input 按钮样式会被默认样式覆盖</h3><p>解决方式如下：</p>
<pre><code>input, textarea &#123;
        border: 0;
        -webkit-appearance: none;
 &#125;</code></pre>
<p>设置默认样式为none</p>
<h3 id="29、IOS键盘字母输入，默认首字母大写"><a href="#29、IOS键盘字母输入，默认首字母大写" class="headerlink" title="29、IOS键盘字母输入，默认首字母大写"></a>29、IOS键盘字母输入，默认首字母大写</h3><p>解决方案，设置如下属性</p>
<pre><code> &lt;input type=&quot;text&quot; autocapitalize=&quot;off&quot; /&gt;</code></pre>
<h3 id="30、select-下拉选择设置右对齐"><a href="#30、select-下拉选择设置右对齐" class="headerlink" title="30、select 下拉选择设置右对齐"></a>30、select 下拉选择设置右对齐</h3><p>设置如下：</p>
<pre><code>select option &#123;
    direction: rtl;
 &#125;</code></pre>
<h3 id="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"><a href="#31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象" class="headerlink" title="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"></a>31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象</h3><p>可以设置如下：</p>
<pre><code>    -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
    transform: rotate(-4deg) skew(10deg) translateZ(0);
    outline: 1px solid rgba(255,255,255,0)</code></pre>
<h3 id="32、移动端点击300ms延迟"><a href="#32、移动端点击300ms延迟" class="headerlink" title="32、移动端点击300ms延迟"></a>32、移动端点击300ms延迟</h3><p>300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。</p>
<p>推荐两个js，一个是fastclick，一个是tap.js</p>
<p>关于300ms延迟，具体请看：<a target="_blank" rel="noopener" href="http://thx.github.io/mobile/300ms-click-delay/">http://thx.github.io/mobile/300ms-click-delay/</a></p>
<h3 id="33、移动端点透问题"><a href="#33、移动端点透问题" class="headerlink" title="33、移动端点透问题"></a>33、移动端点透问题</h3><p>案例如下：</p>
<pre><code>&lt;div id=&quot;haorooms&quot;&gt;点头事件测试&lt;/div&gt;
&lt;a href=&quot;www.jb51.net&quot;&gt;www.jb51.net&lt;/a&gt;</code></pre>
<p>div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：</p>
<pre><code>$(&#39;#haorooms&#39;).on(&#39;tap&#39;, function () &#123;
        $(&#39;#haorooms&#39;).hide();
    &#125;)</code></pre>
<p>我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。</p>
<p>原因：</p>
<p>touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。</p>
<h4 id="解决："><a href="#解决：" class="headerlink" title="解决："></a>解决：</h4><p>（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。</p>
<p>（2）用fastclick，<a target="_blank" rel="noopener" href="https://github.com/ftlabs/fastclick">https://github.com/ftlabs/fastclick</a></p>
<p>（3）用preventDefault阻止a标签的click。</p>
<p>（4）延迟一定的时间(300ms+)来处理事件 （不推荐）。</p>
<p>（5）以上一般都能解决，实在不行就换成click事件。</p>
<p>下面介绍一下touchend事件，如下：</p>
<pre><code>$(&quot;#haorooms&quot;).on(&quot;touchend&quot;, function (event) &#123;
    event.preventDefault();
 &#125;);</code></pre>
<h3 id="34、消除-IE10-里面的那个叉号"><a href="#34、消除-IE10-里面的那个叉号" class="headerlink" title="34、消除 IE10 里面的那个叉号"></a>34、消除 IE10 里面的那个叉号</h3><pre><code> input:-ms-clear&#123;display:none;&#125;</code></pre>
<h3 id="35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等"><a href="#35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等" class="headerlink" title="35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)"></a>35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)</h3><p>iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。</p>
<pre><code>-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;</code></pre>
<h3 id="36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"><a href="#36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格" class="headerlink" title="36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"></a>36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格</h3><p>可以通过正则去掉</p>
<pre><code> this.value = this.value.replace(/\u2006/g, &#39;&#39;);</code></pre>
<h3 id="37、移动端-HTML5-audio-autoplay-失效问题"><a href="#37、移动端-HTML5-audio-autoplay-失效问题" class="headerlink" title="37、移动端 HTML5 audio autoplay 失效问题"></a>37、移动端 HTML5 audio autoplay 失效问题</h3><p>这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。</p>
<p>解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。</p>
<p>解决代码：</p>
<pre><code>document.addEventListener(&#39;touchstart&#39;, function () &#123;
        document.getElementsByTagName(&#39;audio&#39;)[0].play();
        document.getElementsByTagName(&#39;audio&#39;)[0].pause();
&#125;);</code></pre>
<h3 id="38、移动端-HTML5-input-date-不支持-placeholder-问题"><a href="#38、移动端-HTML5-input-date-不支持-placeholder-问题" class="headerlink" title="38、移动端 HTML5 input date 不支持 placeholder 问题"></a>38、移动端 HTML5 input date 不支持 placeholder 问题</h3><p>这个我感觉没有什么好的解决方案，用如下方法</p>
<pre><code>&lt;input placeholder=&quot;Date&quot; class=&quot;textbox-n&quot; type=&quot;text&quot; onfocus=&quot;(this.type=&#39;date&#39;)&quot;  id=&quot;date&quot;&gt;</code></pre>
<h3 id="39、部分机型存在type为search的input，自带close按钮样式修改方法"><a href="#39、部分机型存在type为search的input，自带close按钮样式修改方法" class="headerlink" title="39、部分机型存在type为search的input，自带close按钮样式修改方法"></a>39、部分机型存在type为search的input，自带close按钮样式修改方法</h3><p>有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为</p>
<pre><code>#Search::-webkit-search-cancel-button&#123;
   display: none;
&#125;</code></pre>
<p>如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。</p>
<h3 id="40、唤起select的option展开"><a href="#40、唤起select的option展开" class="headerlink" title="40、唤起select的option展开"></a>40、唤起select的option展开</h3><p>zepto方式:</p>
<pre><code>$(sltElement).trrgger(&quot;mousedown&quot;);</code></pre>
<p>原生js方式:</p>
<pre><code>function showDropdown(sltElement) &#123;
        var event;
        event = document.createEvent(&#39;MouseEvents&#39;);
        event.initMouseEvent(&#39;mousedown&#39;, true, true, window);
        sltElement.dispatchEvent(event);
 &#125;;</code></pre>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/" data-id="ckds6fxak001bk8qcd591bf9o" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Vue.js项目结构说明
        
      </div>
    </a>
  
  
    <a href="/myblog/2016/10/17/2016-10-17-rem%E9%80%82%E9%85%8D-for-iphone/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">rem适配-for-iphone</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/myblog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/myblog/tags/js/" style="font-size: 10px;">js</a> <a href="/myblog/tags/rem/" style="font-size: 16.67px;">rem</a> <a href="/myblog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 10px;">其他</a> <a href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 13.33px;">博客</a> <a href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13.33px;">性能优化</a> <a href="/myblog/tags/%E6%A1%86%E6%9E%B6/" style="font-size: 10px;">框架</a> <a href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 13.33px;">移动端</a> <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" style="font-size: 10px;">跨域请求</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/10/">October 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/09/">September 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/08/">August 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2015/08/">August 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">(no title)</a>
          </li>
        
          <li>
            <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
          </li>
        
          <li>
            <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jason<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/myblog/" class="mobile-nav-link">Home</a>
  
    <a href="/myblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/myblog/fancybox/jquery.fancybox.css">

  
<script src="/myblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/myblog/js/script.js"></script>




  </div>
</body>
</html>